<template>
  <div class="navbar">
    <div class="logo">{{ title }}</div>
    <div class="nav-links">
      <router-link
          exact-active-class="active"
          to="/home"
      >
        风险视频
      </router-link>
      <router-link
          exact-active-class="active"
          to="/about"
      >
        关于我们
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderComponent",
  props: {
    title: String
  }
}
</script>

<style lang="scss" scoped>
/* 顶部导航栏样式 */
.navbar {
  background-color: #409eff;
  color: #fff;
  padding: 15px;
  display: flex;
  justify-content: space-between; /* 在两端对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px;
}
.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  transition: background-color 0.3s;
}
.navbar a:hover, .navbar .active {
  background-color: rgba(255, 255, 255, 0.2); /* 悬停变色 */
  border-radius: 5px; /* 圆角 */
}
</style>
